import { PanelFieldController, useNamespace } from '@ibiz-template/vue3-util';
import { IPanelField } from '@ibiz/model-core';
import { computed, defineComponent, PropType } from 'vue';
import './filter-condition.scss';

export const FilterCondition = defineComponent({
  name: 'IBizFilterCondition',
  props: {
    modelData: {
      type: Object as PropType<IPanelField>,
      required: true,
    },
    controller: {
      type: PanelFieldController,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('filter-condition');

    // 类名控制
    const classArr = computed(() => {
      const { id } = props.modelData;
      const result: Array<string | false> = [ns.b(), ns.m(id)];
      result.push(...props.controller.containerClass);
      return result;
    });

    const onValueChange = (val: unknown, name?: string): void => {
      props.controller.setDataValue(val, name);
    };

    const handleDataChange = (data: IData) => {
      console.log('值变更', data);
    };

    return {
      ns,
      classArr,
      handleDataChange,
    };
  },
  render() {
    return (
      <div
        class={this.classArr}
        onClick={() => {
          this.controller.onClick();
        }}
      >
        <iBizConditionBuilder
          url='/data_resources/fetchdefault'
          context={this.controller.context}
          params={this.controller.params}
          onChange={(data: IData) => this.handleDataChange(data)}
        ></iBizConditionBuilder>
      </div>
    );
  },
});
